In deze code leidt de eerste regel tot een zin waarin het woord bloemen aanklikbaar is :
Geniet van alle mooie bloemen in de natuur.
Vlak voor de code die de foto met bloemen laat zien, staat een indicatie dat daar naartoe wordt gesprongen.
Het meest minimale html-bestand dat ik kan bedenken heeft de volgende inhoud:
<!DOCTYPE html>
<html>
<body>
Tekst
</body>
</html>
Als je dit bestand in je browser laat zien, wordt alleen de tekst getoond, die je tussen <body> en </body> hebt ingetypt :
De tekenreeksen die tussen < en > staan, heten tags. In het bovenstaande code zie je dus een html-tag en een body-tag.
Het eerste wat ik zou doen, is de titel van het tabblad veranderen. Ik verander de titel door HTML. Ik voeg een header met de tag <head> aan het document toe, en geef daarin aan wat de titel moet zijn door middel van de tag <title>.
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
Tekst
</body>
</html>
Als je het bestand in een browser weergeeft, zie je zoiets als:
Ten behoeve van voorleessoftware en zoekmachines kun je aangeven in welke taal de tekst is geschreven. Dit doe je door het attribuut lang aan de html-tag toe te voegen, bijvoorbeeld met <html lang="nl"> voor een nederlandstalige website of <html lang="en"> voor een engelstalige website.
<!DOCTYPE html>
<html lang="nl">
<head>
<title>HTML</title>
</head>
<body>
Tekst
</body>
</html>
In de computerwereld zijn verschillende tekensets in gebruik. Een tekenset geeft aan hoe de verschillende letters, cijfers en andere tekens in computers technisch worden gecodeerd. Daarom voeg je in de tag <head> de volgende regel toe: <meta charset="utf-8">
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
Tekst
</body>
</html>
Als je een kopregel met een wat groter of kleiner lettertype wilt opnemen in je tekst, dan kun je één van de tags <h1>, <h2>, <h3>, <h4>, <h5> of <h6> gebruiken. Bijvoorbeeld:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Muziek</title>
</head>
<body>
<h1>Muziek</h1>
<h2>Geluidsgolven</h2>
De basis voor muziek zijn geluidsgolven in de lucht.
<h3>Longitudinale geluidsgolven</h3>
Bij geluidsgolven gaat het niet om deeltjes die omhoog
en omlaag gaan, zoals bij watergolven, maar om golven
waarbij de deeltjes heen en weer bewegen in de richting
van de golf.
</body>
</html>
Als je tekst op een nieuwe regel wilt laten beginnen, gebruik je de tag <br>.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Poesje mauw</title>
</head>
<body>
Poesje mauw,<br>
Kom eens gauw.<br>
Ik heb lekkere melk voor jou.
</body>
</html>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Poesje mauw</title>
</head>
<body>
<p>
Poesje mauw,<br>
Kom eens gauw.<br>
Ik heb lekkere melk voor jou.
</p>
<p>
En voor mij,<br>
Rijstebrij,<br>
O, wat heerlijk smullen wij.
</p>
</body>
</html>
Foto's kun je met de img-tag in een html-bestand opnemen. Je moet daarbij de naam van het foto-bestand als attribuut in de img-tag opnemen. Je gebruikt daarvoor het attribuut src, dat een afkorting is van het woord source (bron).
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Voetballen</title>
</head>
<body>
<img src="html_0008.jpg">
</body>
</html>
Hierbij staat het bestand html_0008.jpg in dezelfde map als de broncode.
Je kunt de foto kleiner maken door een breedte op te geven.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Voetballen</title>
</head>
<body>
<img src="html_0008.jpg" width="50%">
</body>
</html>
^
width="50%" gaat om een percentage. Het gaat hier om een percentage van de breedte van het browser-venster. Als je het venster groter maakt, wordt ook het plaatje groter.
Je kunt de grootte van het foto bestand ook als een getal aangeven. Dan gaat de browser ervan uit dat je pixels bedoelt. Waar je wel rekening mee moet houden is dat de pixels niet op alle beeldschermen even groot is.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Voetballen</title>
</head>
<body>
<img src="html_0008.jpg" width="100">
</body>
</html>
Als je de breedte uitdrukt in em, bijvoorbeeld width="500em", dan is de grootte van het plaatje afhankelijk van de grootte van het lettertype dat je gebruikt. 1em is de lettergrootte van het huidige lettertype (font-size).
We keren terug naar het vorige vooorbeeld over muziek. Veel van de toekomstige lezers zullen zich niet direct iets kunnen voorstellen bij het begrip longitudinale geluidsgolven. We beschikken gelukkig over een afbeelding die dat zou kunnen verduidelijken. We voegen dit plaatje toe.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Muziek</title>
</head>
<body>
<h1>Muziek</h1>
<h2>Geluidsgolven</h2>
<p>
De basis voor muziek zijn geluidsgolven in de lucht.
<h3>Longitudinale geluidsgolven</h3>
Bij geluidsgolven gaat het niet om deeltjes die omhoog
en omlaag gaan, zoals bij watergolven, maar om golven
waarbij de deeltjes heen en weer bewegen in de richting
van de golf.
</p>
<img src="html_0003.jpg">
</body>
</html>
Het resultaat is:
We maken nu de breedte van het plaatje afhankelijk van de grootte van het lettertype. M.a.w. als je browser ingesteld is op een groot lettertype, dan zie je ook een groter plaatje.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Muziek</title>
</head>
<body>
<h1>Muziek</h1>
<h2>Geluidsgolven</h2>
<p>
De basis voor muziek zijn geluidsgolven in de lucht.
<h3>Longitudinale geluidsgolven</h3>
Bij geluidsgolven gaat het niet om deeltjes die omhoog
en omlaag gaan, zoals bij watergolven, maar om golven
waarbij de deeltjes heen en weer bewegen in de richting
van de golf.
</p>
<img src="html_0003.png" width="500em">
</body>
</html>
Voor een opsomming kun je gebruik maken van de tags <ul> (unnumbered list) en <li> (list item).
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<ul>
<li>Luisteren</li>
<li>Spreken</li>
<li>Lezen</li>
<li>Schrijven</li>
</ul>
</body>
</html>
Je kunt het opsommingsteken wijzigen met het attribuut style.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<ul style="list-style-type:square;">
<li>Luisteren</li>
<li>Spreken</li>
<li>Lezen</li>
<li>Schrijven</li>
</ul>
</body>
</html>
Naast square zijn er ook nog de keuzemogelijkheden disc, circle en none.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<ul style="list-style-type:none;">
<li>Luisteren</li>
<li>Spreken</li>
<li>Lezen</li>
<li>Schrijven</li>
</ul>
</body>
</html>
Een genummerde lijst kun je maken met de tags <ol> (ordered list) en <li> (list item).
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<ol>
<li>Letters</li>
<li>Klanken (klinkers en medeklinkers)</li>
<li>Woordenschat</li>
<li>Grammatica</li>
</ol>
</body>
</html>
De manier van nummeren kun je wijzigen met het attribuut type.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<ol type="i">
<li>Letters</li>
<li>Klanken (klinkers en medeklinkers)</li>
<li>Woordenschat</li>
<li>Grammatica</li>
</ol>
</body>
</html>
In plaats van de i kun je ook kiezen voor a (kleine letters), A (grote letters), I (Romeinse cijfers in hoofdletters) of 1 (nummeren met cijfers).
Tabellen kun je maken met de tags <table>, <tr> en <td>. De tags <table> en </table> omsluiten de gehele tabel. De tags <tr> en </tr> omsluiten een tabelregel. De tags <td> en </td> omsluiten een cel.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<table>
<tr>
<td><img src="html_0015_blij.jpg" width="60em"></td>
<td>blij</td>
</tr>
<tr>
<td><img src="html_0016_boos.jpg" width="60em"></td>
<td>boos</td>
</tr>
<tr>
<td><img src="html_0017_teleurgesteld.jpg" width="60em"></td>
<td>teleurgesteld</td>
</tr>
<tr>
<td><img src="html_0018_bedachtzaam.jpg" width="60em"></td>
<td>bedachtzaam</td>
</tr>
</table>
</body>
</html>
Ik vind het prettig als ik kan zien hoe de tabel is gestructureerd. Dat bereik ik met het attribuut border in de table-tag.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<table border>
<tr>
<td><img src="html_0015_blij.jpg" width="60em"></td>
<td>blij</td>
</tr>
<tr>
<td><img src="html_0016_boos.jpg" width="60em"></td>
<td>boos</td>
</tr>
<tr>
<td><img src="html_0017_teleurgesteld.jpg" width="60em"></td>
<td>teleurgesteld</td>
</tr>
<tr>
<td><img src="html_0018_bedachtzaam.jpg" width="60em"></td>
<td>bedachtzaam</td>
</tr>
</table>
</body>
</html>
Met de tag <thead> kun je een kopregel toevoegen aan de tabel. De tag <th> maakt dat de teksten in een cel gecentreerd worden en vet worden weergegeven.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Taal</title>
</head>
<body>
<table border>
<thead>
<tr>
<th>Emoji</th>
<th>Emotie</th>
</tr>
</thead>
<tr>
<td><img src="html_0015_blij.jpg" width="60em"></td>
<td>blij</td>
</tr>
<tr>
<td><img src="html_0016_boos.jpg" width="60em"></td>
<td>boos</td>
</tr>
<tr>
<td><img src="html_0017_teleurgesteld.jpg" width="60em"></td>
<td>teleurgesteld</td>
</tr>
<tr>
<td><img src="html_0018_bedachtzaam.jpg" width="60em"></td>
<td>bedachtzaam</td>
</tr>
</table>
</body>
</html>
Als je de tabelranden weer weghaalt door het attribuur border uit de tabel-tag te verwijderen, krijg je:
Soms is het handig om cellen samen te voegen tot één cel. Hiertoe gebruik je de rowspan en colspan attributen van de th- en td-tags. colspan="2" betekent dat 2 naast elkaar gelegen cellen samengevoegd worden tot één cel. rowspan="2" betekent dat 2 onder elkaar liggende cellen samengevoegd worden tot één cel.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>ABCD-tabel</title>
</head>
<body>
<table border>
<thead>
<tr>
<th colspan="3">ABC</td>
<th rowspan="2">D</th>
</tr>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td colspan="2" rowspan="2">g</td>
</tr>
<tr>
<td colspan="2" >i</td>
</tr>
<tr>
<td colspan="4">m</td>
</tr>
</table>
</body>
</html>
Stel dat je in je tekst verwijst naar een andere plek op het internet.
Het is dan handig als je op die verwijzing kan klikken om
naar die plek toe te gaan.
Dat kun je bewerkstelligen met de tag <a>.
Als je bijvoorbeeld naar een tekst over bloemen verwijst,
plaats je voor die tekst bijvoorbeeld de tag
<a id="bloemen">.
Voor het gebied waarop je wilt kunnen klikken plaats je de tag
<a href="#bloemen">
Aan het einde van het gebied waarop je wilt kunnen klikken,
plaats je
</a>.
De tekst waarop je wilt klikken, wordt hyperlink genoemd.
De plaats waar je dan naar toe gaat, wordt link genoemd.
In de code van deze site staat:
In deze code leidt de eerste regel tot een zin
waarin het woord bloemen aanklikbaar is :
Geniet van alle mooie bloemen in de natuur.
Vlak voor de code die de foto met bloemen laat zien, staat
een indicatie dat daar naartoe wordt gesprongen.
Scroll nu zo, dat de foto met bloemen buiten beeld is, maar de zin waarin je het woord bloemen kunt aanklikken, wel zichtbaar is. Zodra je op het woord bloemen klikt, verspringt de pagina naar de foto met bloemen.
Je kunt een foto ook zelf aanwijzen als plaats om naar toe te springen door de id in de img-tag te plaatsen.
Je kunt de manier waarop het html-bestand wordt weergegeven door de browser beïnvloeden via een apart bestand. Je legt een verbinding met zo'n opmaakbestand middels een link-commando in de head-tag.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>IJstijd</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Heel lang geleden was het veel kouder op de wereld dan nu.
Die tijd wordt de ijstijd genoemd.
Er waren toen grote ijsvlakten in Nederland, die langzaam verschoven.
We noemen die ijsmassa's gletschers.
</body>
</html>
Als het css-bestand styles.css niet bestaat, of als er helemaal niets in staat, zie je in de browser zoiets als:
In een css-specificatie staat bijvoorbeeld:
body {
color: black;
font-family: Helvetica;
}
Dat betekent in het gedeelte body van de html-pagina dat de letters een zwarte kleur krijgen en dat het lettertype Helvetica zal zijn. De namen van de onderdelen van zo'n specificatie zijn hieronder aangegeven.
De nederlandse benaming voor property is eigenschap. De nederlandse benaming voor value is waarde.
In het css-bestand kun je in de html-bestanden die daaraan gekoppeld zijn, van alles veranderen. Je kunt bijvoorbeeld aangeven dat de letters groter moeten worden. Als het css-bestand styles.css de volgende inhoud heeft:
body {
font-size: 1.5em;
}
dan laat de browser de tekst op de volgende manier zien:
De browser kijkt eerst welke tekst er tussen <body> en </body> staat, en maakt die tekst dan groter. De grootte wordt in dit geval anderhalf em (een lengtemaat die veel in css gebruikt wordt).
<!DOCTYPE html>
<html lang="nl">
<head>
<strong><meta charset="utf-8"></strong>
<title>IJstijd</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Heel lang geleden was het veel kouder op de wereld dan nu.
Die tijd wordt de <schuin>ijstijd</schuin> genoemd.
Er waren toen grote ijsvlakten in Nederland, die langzaam verschoven.
We noemen die ijsmassa's <schuin>gletschers<schuin>.
</body>
</html>
De inhoud van het css-bestand wordt
body {
font-size: 1.5em;
}
schuin {
font-style: italic;
}
De browser laat het volgende zien:
<!DOCTYPE html>
<html lang="nl">
<head>
<strong><meta charset="utf-8"></strong>
<title>IJstijd</title>
<style>
body {
font-size: 1.5em;
}
schuin {
font-style: italic;
}
</style>
</head>
<body>
Heel lang geleden was het veel kouder op de wereld dan nu.
Die tijd wordt de <schuin>ijstijd</schuin> genoemd.
Er waren toen grote ijsvlakten in Nederland, die langzaam verschoven.
We noemen die ijsmassa's <schuin>gletschers<schuin>.
</body>
</html>
Je kunt een opmaak-eigenschap aan een tag koppelen, maar ook aan een class of id. Voor de opmaak van een class laat je de selector met een punt beginnen. Voor de opmaak van een id laat je de selector met een # beginnen. Schematisch:
| selector of attribuut | selector begint met | |
|---|---|---|
| tag | letter | |
| class | . | |
| id | # |
Als voorbeeld volgt eerst een lijst zonder opmaak.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Rekenen</title>
</head>
<body>
<h3>Rekenkundige bewerkingen</h3>
<ul>
<li>optellen</li>
<li class="schuin">aftrekken</li>
<li id="groot">vermenigvuldigen</li>
<ul>
</body>
</html>
Deze code leidt tot
We voegen wat css-opmaak toe.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Rekenen</title>
<style>
h3 {
font-style: italic;
}
#groot {
font-size: 1.3em;
}
.schuin {
font-style: italic;
}
</style>
</head>
<body>
<h3>Rekenkundige bewerkingen</h3>
<ul>
<li>optellen</li>
<li class="schuin">aftrekken</li>
<li id="groot">vermenigvuldigen</li>
<ul>
</body>
</html>
De browser toont dan
Met de eigenschap font-family kun je het lettertype veranderen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Lettertype</title>
<style>
.lettertype_arial {
font-family: arial;
}
.lettertype_calibri {
font-family: calibri;
}
.lettertype_garamond {
font-family: garamond;
}
.lettertype_times_new_roman {
font-family: 'times new roman';
}
.lettertype_courier_new {
font-family: 'Courier New';
}
</style>
</head>
<body>
<table border>
<tr class="lettertype_arial">
<td>Arial</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
<tr class="lettertype_calibri">
<td>Calibri</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
<tr class="lettertype_garamond">
<td>Garamond</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
<tr class="lettertype_times_new_roman">
<td>Times New Roman</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
<tr class="lettertype_courier_new">
<td>Courier New</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
</table>
</body>
</html>
Op mijn Windows-10-computer heeft het lettertype Microsoft Sans Serif de volgende layout:
Het lettertype Sans Serif is er echter niet op geïnstalleerd. Ik probeer nu toch wat tekst in het lettertype Sans Serif weer te geven met de code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Lettertype</title>
<style>
.lettertype_sans_serif {
font-family: 'sans serif';
}
.lettertype_times_new_roman {
font-family: 'times new roman';
}
</style>
</head>
<body>
<table border>
<tr class="lettertype_sans_serif">
<td>Sans Serif</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
<tr class="lettertype_times_new_roman">
<td>Times New Roman</td>
<td>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog</td>
</tr>
</table>
</body>
</html>
Het resultaat is:
Het lettertype Sans Serif wordt net zo weergegeven als het lettertype Times New Roman. We kunnen dit analyseren met Inspect of Inspect Element.
Voor de tekst die in Times New Roman wordt weergegeven, zie je dat Times Roman ook expliciet staat vermeld.
Als je dezelfde inspectie uitvoert bij de tekst die in lettertype Sans Serif zou moeten worden weergegeven, zie je dat de lettertype_sans_serif niet wordt herkend door de browser. In de middelste kolom (van de browser Firefox) wordt het lettertype (font-family) niet vermeld. De tekst wordt weergegeven in het default lettertype, dat klaarblijkelijk Times New Roman is.
Je kunt letters vet afdrukken met de eigenschap font-weight. Je kunt de waarden 100, 200, 300, ... 800 en 900 toekennen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Lettertype</title>
<style>
.letter_vet {
font-weight: 900;
}
</style>
</head>
<body>
<p>
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog<br>
. , ; ? !
</p>
<p class="letter_vet">
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG<br>
the quick brown fox jumps over the lazy dog<br>
. , ; ? !
</p>
</body>
</html>
Je kunt de afstand tussen de regels veranderen met de eigenschap line-height. Als waarde zou je een percentage van de normale regelafstand kunnen nemen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Grote regelafstand</title>
<style>
.regelafstand_groot {
line-height: 150%;
}
</style>
</head>
<body>
<p>
De heuvels op de Veluwe zijn ontstaan door deze gletschers.
De ijsmassa's duwden een hoop zand opzij,
en toen het ijs later smolt, ging het opzij geduwde zand over in heuvels.
</p>
<p class="regelafstand_groot">
De heuvels op de Veluwe zijn ontstaan door deze gletschers.
De ijsmassa's duwden een hoop zand opzij,
en toen het ijs later smolt, ging het opzij geduwde zand over in heuvels.
</p>
</body>
</html>
Met de eigenschap color kun je letters een andere kleur geven.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Rode letters</title>
<style>
.letter_rood {
color: red;
}
</style>
</head>
<body>
<p>
In de ijstijd was het heel erg koud, en dus was er heel veel ijs.
De zeespiegel was veel lager.
Heel erg lang geleden zat Nederland zelfs vast aan Engeland.
Er was helemaal geen zee tussen Nederland en Engeland.
Er liepen toen harige olifanten rond.
Die olifanten met haar noemen we mammoeten.
Vissers vinden soms op de bodem van de zee de botten van die mammoeten.
</p>
<p class="letter_rood">
In de ijstijd was het heel erg koud, en dus was er heel veel ijs.
De zeespiegel was veel lager.
Heel erg lang geleden zat Nederland zelfs vast aan Engeland.
Er was helemaal geen zee tussen Nederland en Engeland.
Er liepen toen harige olifanten rond.
Die olifanten met haar noemen we mammoeten.
Vissers vinden soms op de bodem van de zee de botten van die mammoeten.
</p>
</body>
</html>
Met de eigenschap background-color kun je een achtergrondkleur toekennen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Gele achtergrond</title>
<style>
.achtergrond_geel {
background-color: yellow;
}
</style>
</head>
<body>
<p>
De heuvels op de Veluwe zijn ontstaan door gletschers.
De ijsmassa's duwden een hoop zand opzij,
en toen het ijs later smolt, ging het opzij geduwde zand over in heuvels.
Toen het zo koud was, was er dus heel veel ijs,
en was de zeespiegel veel lager.
</p>
<p class="achtergrond_geel">
De heuvels op de Veluwe zijn ontstaan door gletschers.
De ijsmassa's duwden een hoop zand opzij,
en toen het ijs later smolt, ging het opzij geduwde zand over in heuvels.
Toen het zo koud was, was er dus heel veel ijs,
en was de zeespiegel veel lager.
</p>
</body>
</html>
Voor tekens die niet tot het standaard alfabet of tot de standaard leestekens behoren, bestaan aparte codes, die beginnen met een ampersand (&) en eindigen met een puntkomma. Hieronder zie je er een aantal:
| teken | code | omschrijving |
|---|---|---|
| & | & | en-teken, ampersand |
| © | © | copyright-teken |
| € | € | euro-teken |
| $ | $ | dollar-teken |
| £ | £ | pond-teken |
| @ | @ | at-teken (commercial at) |
| á | á | a met accent-aigue |
| à | à | a met accent-grave |
| é | é | e met accent-aigue |
| è | è | e met accent-grave |
| ë | ë | e-umlaut |
| ï | ï | i-umlaut |
| ¸ | ¸ | cedille |
| ç | ç | c met cedille |
| ñ | ñ | n met tilde |
| { | { | accolade-openen |
| } | } | accolade-sluiten |
| < | < | kleiner dan |
| > | > | groter dan |
| ℕ | ℕ | Double-Struck Capital N |
| ℤ | ℤ | Double-Struck Capital Z |
| ℚ | ℚ | Double-Struck Capital Q |
| ℝ | ℝ | Double-Struck Capital R |
| ℂ | ℂ | Double-Struck Capital C |
| ✓ | ✓ | vinkje |
| ✗ | ✗ | x-je |
| ❘ | &❘ | verticaal streepje |
| | spatie (no break space) |
Voorbeeld:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Speciale tekens</title>
</head>
<body>
<p>
Het boek kost € 5,-.
</p>
</body>
</html>
Meer over deze "HTML Character Entity References" vind je op https://symbl.cc
Default worden de randen van een tabel niet weergegeven. Vaak wil je dat de individuele cellen wel kunt zien. Om de randen zo te krijgen als je je die voorgesteld, moet je wel een idee hebben van de naamgeving.
De celranden kun je met de eigenschappen border-width, border-style en border-color instellen. border-width heeft mogelijke waarden thin (smal), medium (standaard) en thick (breed). border-style heeft mogelijke waarden none (geen rand), solid (ononderbroken), dashed (streepjes), dotted (puntjes) double (dubbele rand), groove (gekerfd), ridge (de rand is een soort richel die 'boven het papier' uitsteekt), inset (ingelegd), outset (opgelegd), hidden (hetzelfde als none).
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>try2</title>
<style>
.rand {
border-width: normal;
border-style: solid;
border-color: lightGray;
}
</style>
</head>
<body>
<table class="rand">
<tr>
<td class="rand">+</td>
<td class="rand">+</td>
<td class="rand">plus</td>
<td class="rand">optellen</td>
</tr>
<tr>
<td class="rand">−</td>
<td class="rand">−</td>
<td class="rand">min</td>
<td class="rand">aftrekken</td>
</tr>
<tr>
<td class="rand">×</td>
<td class="rand">×</td>
<td class="rand">keer</td>
<td class="rand">vermenigvuldigen</td>
</tr>
<tr>
<td class="rand">÷</td>
<td class="rand">÷</td>
<td class="rand">gedeeld door</td>
<td class="rand">delen</td>
</tr>
</table>
</body>
</html>
Kleuren kunnen op verschillende manieren worden aangeduid. De volgende kleur-specificaties staan allemaal voor rood.
| color: red | kleurnaam | |
| color: #ff0000 | RGB met hexadecimale notatie: rrggbb | |
| color: #f00 | RGB met verkorte hexadecimale notatie: rgb | |
| color: rgb(255 0 0) | RGB met decimale notatie | |
| color: rgb(100% 0 0) | RGB met waarde in procenten | |
| color: rgb(255 0 0 / 1) | RGB met transparantie | |
| color: hsl(0 100% 50%) | HSL | |
| color: hsl(0 100% 50% / 1) | HSLmet transparantie |
RGB staat voor rood-groen-blauw. RGB wordt weergegeven met drie getallen, die lopen van 0 t/m 255. Het eerste getal correspondeert met rood, het tweede getal met groen en het derde getal met blauw. Als je de getallen in het 16-tallig stelsel weergeeft (waarin a staat voor 11, b voor 12, c voor 13, enzovoorts t/m f voor 16) loopt elk van de drie getallen van 0 t/m ff. Dit 16-tallig stelsel wordt het hexadecimale getallenstelsel genoemd. Als in dit stelsel een getal uit twee dezelfde letters of cijfers bestaat, dan kun je de verkorte notatie van 3 letters of cijfers gebruiken. 0 staat dan voor 00, 1 staat voor 11, 2 staat voor 22, enzovoorts t/m f voor ff. De kleur #aabbcc kun je dan ook noteren als #abc, en #ff0000 wordt #f00.
HSL staat voor hue-saturation-lightness. Het is gebaseerd op een kleurenwiel dat loopt van 0 tot 360 graden. Ook hier wordt een kleur aangegeven met drie getallen. Het eerste getal loopt van 0 tot 360 graden. 0 = rood, 60 = geel,120 = groen, 180 = blauwgroen, 240 = blauw, 300 = roze, 360 = rood. Het tweede getal is het percentage verzadiging en loopt van 0% t/m 100%. Het derde getal is het percentage helderheid loopt eveneens van 0 tot 360 graden.
Achter de / (slash) komt de doorzichtigheid (opacity). opacity: 0 betekent volledig doorzichtig. opacity: 1 betekent volledig ondoorzichtig. opacity: 0.5 betekent half doorzichtig.